<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title> <#-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<#include "/resource/resource-lte-css.html">
</head>
<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">
    <!-- header -->
    <#include "/admin/common/header.html">
    <!-- aside -->
    <#include "/admin/common/aside.html">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <!-- Content Header (Page header) -->
      <section class="content-header">
        <h1><i class="fa fa-file"></i>内容 <small>管理</small></h1>
        <ol class="breadcrumb">
          <li><a href="#">
              <i class="fa fa-dashboard"></i> Home
            </a></li>
          <li class="active">Dashboard</li>
        </ol>
      </section>

      <!-- Main content -->
      <section class="content">
        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-3">
            <!-- quick email widget -->
            <div class="box box-info">
              <div class="box-header with-border">
                <h3 class="box-title">栏目</h3>
              </div>
              <div class="box-body">
                <ul id="mainTree" class="ztree"></ul>
              </div>
            </div>
          </section>
          <section class="col-lg-9">
            <!-- quick email widget -->
            <div class="box box-info">
              <div class="box-header with-border">
                <button class="btn btn-primary" onclick="add()">
                  <i class="fa fa-save"></i> 添加
                </button>
                <button class="btn btn-success" onclick="edit()">
                  <i class="fa fa-edit"></i> 修改
                </button>
                <button class="btn btn-danger" onclick="batchRemove();">
                  <i class="fa fa-remove"></i> 批量删除
                </button>
              </div>
              <div class="box-body">
                <div id="toolbar">
                  <form id="searchForm" class="form-inline">
                    <div class="form-group">
                      <label for="searchTitle">标题</label>
                      <input type="text" class="form-control" name="title" id="searchTitle" placeholder="请输入标题">
                    </div>
                    <div class="form-group input-daterange">
                      <label for="searchStartTime">发表时间</label>
                      <div class="input-group input-daterange">
                        <input type="text" class="form-control" name="startTime" id="searchStartTime" placeholder="请输入起始时间" />
                        <span class="input-group-addon">至</span>
                        <input type="text" class="form-control" name="endTime" id="searchEndTime" placeholder="请输入结束时间" />
                      </div>
                    </div>
                    <input class="btn btn-default" type="button" id="searchBtn" value="搜索">
                  </form>
                </div>

                <table id="table"></table>


              </div>
            </div>

          </section>
          <!-- /.Left col -->
        </div>
        <!-- /.row (main row) -->
      </section>
      <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <#include "/admin/common/footer.html">
  </div>
  <!-- ./wrapper -->
  <input type="hidden" id="categoryId">
</body>
<#include "/resource/resource-lte-js.html">
<script type="text/javascript">
    var $table = $('#table');
    selections = [];

    // 初始化时间拾取
    $('.input-daterange').datepicker({
        format : 'yyyy-mm-dd',
        keyboardNavigation : false
    });

    // ztree的点击事件
    function onClick(event, treeId, treeNode, clickFlag) {
        var categoryId = treeNode.id;
        $('#categoryId').val(categoryId);
        $table.bootstrapTable('refresh');
    }

    $(function() {
        // 左侧ztree
        $.ajax({
            url : ADMIN_PATH + '/category/get-all',
            dataType : 'json',
            type : 'GET',
            contentType : 'application/json;charset=utf-8',
            success : function(data) {
                if (data.success) {
                    var zNodes = data.data;
                    var zArr = new Array();
                    if (zNodes != null && zNodes.length > 0) {
                        var setting = {
                            data : {
                                simpleData : {
                                    enable : true,
                                    pIdKey : 'parentId'
                                }
                            },
                            callback : {
                                onClick : onClick
                            }
                        };
                        var treeObj = $.fn.zTree.init($("#mainTree"), setting, zNodes);
                        treeObj.expandAll(true);
                    }
                    return;
                } else {
                    swal(data.title, data.msg, 'error');
                }
            },
            error : function(data) {
                swal('错误', '网络或者连接异常,请稍后再试.', 'error');
            }
        });

        // 初始化表格
        $table.bootstrapTable({
            sidePagination : 'server',
            pagination : 'true',
            url : '${ctx}${adminPath}/content/get-by-con',
            // toolbar : '#toolbar',
            queryParams : function(params) {
                var limit = params.limit;
                var page = params.offset / limit + 1;
                var categoryId = $('#categoryId').val();
                var title = $('#searchTitle').val();
                var startTime = $('#searchStartTime').val();
                var endTime = $('#searchEndTime').val();

                var par = {};
                par.page = page;
                par.rows = limit;
                par.categoryId = categoryId;
                if (title != null && title != '') {
                    par.title = title;
                }
                par.startTime = startTime;
                par.endTime = endTime;
                // alert(JSON.stringify(par));
                return par;
            },
            columns : [ {
                field : 'state',
                checkbox : true,
            }, {
                title : 'ID',
                field : 'id',
            }, {
                field : 'title',
                title : '标题',
            }, {
                field : 'url',
                title : '访问',
                formatter : function(index, row) {
                    var href = FRONT_PATH + '/content/' + row.id;
                    return '<a target="_BLANK" href="'+href+'">访问</a>';
                }
            } ],
            responseHandler : function(res) {
                res.rows = res.list;
                return res;
            }
        });

        // 搜索按钮点击事件
        $('#searchBtn').click(function() {
            var formJson = $('#searchForm').serializeJSON();
            // alert(JSON.stringify(formJson));
            $table.bootstrapTable('refresh');
        });
    });

    // 获得表格的选中项的id数组
    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function(row) {
            return row.id;
        });
    }

    // 点击添加按钮
    function add() {
        var categoryId = $('#categoryId').val();
        if (categoryId == null || categoryId == '') {
            swal('错误', '请选择栏目(点击左侧选择栏目).', "error");
            return;
        } else {
            var url = ADMIN_PATH + '/content/add/' + categoryId;
            window.open(url);
        }
    }

    // 点击修改按钮
    function edit() {
        var selectId = getIdSelections();
        if (selectId != null) {
            if (selectId.length == 1) {
                var url = ADMIN_PATH + '/content/edit/' + selectId;
                window.open(url);
                return;
            } else {
                swal('错误', '请勾选, 并确保仅勾选了一篇内容.', "error");
                return;
            }
        } else {
            swal('错误', '请勾选要修改的文章', "error");
            return;
        }
    }

    // 批量删除
    function batchRemove() {
        var ids = getIdSelections();

        if (ids == null || ids.length == 0) {
            swal('错误', '请勾选想删除的项.', "error");
            return;
        } else {
            swal({
                title : "确认",
                text : "确定删除选中的项吗?",
                type : "warning",
                showCancelButton : true,
                cancelButtonText : '取消',
                confirmButtonColor : "#DD6B55",
                confirmButtonText : "删除",
                closeOnConfirm : false
            }, function() {
                $.ajax({
                    url : '${ctx}${adminPath}/content/del-by-ids',
                    dataType : "json",
                    data : '[' + ids + ']',
                    type : "DELETE",
                    contentType : "application/json;charset=utf-8",
                    success : function(data) {
                        swal(data.title, data.msg, "success");
                    },
                    error : function(data) {
                        swal('错误', '网络或者连接异常,请稍后再试.', "error");
                    }
                });
                $table.bootstrapTable('remove', {
                    field : 'id',
                    values : ids
                });
            });
        }
    }
</script>
</html>
